<template>
  <div class="app-container">
    <el-form label-width="120px">

      <el-form-item label="学号">
        <el-input v-model="volunteer.positionId" style="width: 300px;"/>
      </el-form-item>

      <el-form-item label="志愿者姓名">
        <el-input v-model="volunteer.username" style="width: 300px;"/>
      </el-form-item>

      <el-form-item label="性别">
        <el-select v-model="volunteer.sex" clearable placeholder="请选择性别">
          <!--
            数据类型一定要和取出的json中的一致，否则没法回填
            因此，这里value使用动态绑定的值，保证其数据类型是number
          -->
          <el-option :value="true" label="男"/>
          <el-option :value="false" label="女"/>
        </el-select>
      </el-form-item>

      <el-form-item label="密码">
        <el-input v-model="volunteer.password" style="width: 500px;"/>
      </el-form-item>

      <el-form-item label="电话">
        <el-input v-model="volunteer.telephone" style="width: 500px;"/>
      </el-form-item>

      <el-form-item label="邮箱">
        <el-input v-model="volunteer.email" style="width: 500px;"/>
      </el-form-item>

      <el-form-item label="所属学院">
        <el-input v-model="volunteer.institution" style="width: 500px;"/>
      </el-form-item>

      <el-form-item label="账号状态">
        <el-select v-model="volunteer.status" clearable placeholder="请选择激活或禁用">
          <!--
            数据类型一定要和取出的json中的一致，否则没法回填
            因此，这里value使用动态绑定的值，保证其数据类型是number
          -->
          <el-option :value="true" label="已激活"/>
          <el-option :value="false" label="未激活"/>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import volunteer from '@/api/management/volunteer'
export default {
    data(){
        return{
            volunteer:"",
            //防止重复点击提交按钮
            saveBtnDisabled:false
        }
    },
    created(){
        this.init()
    },
    watch:{
        $route(to,from){
            //路由发生变化时，执行初始化方法
            this.init()
        }
    },
    methods:{
        init(){
            //判断是否有ID值，有的话说明是修改操作，需要回显
            if (this.$route.params && this.$route.params.id) {
                //从路径中获取ID值
                const id = this.$route.params.id
                //调用跟ID值查询的方法
                this.getInfo(id)
            }else{
                //路径中没有ID，为新增，需要清空表单
                this.volunteer = {}
            }
        },
        //根据讲师ID查询讲师
        getInfo(id){
            volunteer.getVolunteerById(id)
                .then(response =>{
                    this.volunteer = response.data.volunteer
                })
        },
        saveOrUpdate(){
            if (this.volunteer.id) {
                this.updateVolunteerInfo()
            }else{
                this.addVolunteer()
            }
        },
        updateVolunteerInfo(){
            //更新用户信息
            volunteer.updateVolunteerInfo(this.volunteer)
                .then(response =>{
                    this.$message({
                        type: 'success',
                        message: '更新成功!'
                    });
                    //回到列表页面
                    this.$router.push({path:'/volunteer/table'})
                })
        },
        //添加讲师
        addVolunteer(){
            volunteer.addVolunteer(this.volunteer)
                .then(response =>{
                    //提示添加成功
                    this.$message({
                        type: 'success',
                        message: '添加成功!'
                    });
                    //回到列表页面
                    this.$router.push({path:'/volunteer/table'})
                })
        }
    }
}
</script>
